<template>
    <div class="resume-preview">
        <Header></Header>
        <div class="resume-preview-main flex" v-if="resumeData">
            <div class="resume-preview-left" ref="bill" v-show="firstFlag">
                <!---->
                <div class="personal-info">
                    <div class="personal-main flex">
                        <div class="face-box">
                            <img :src="resumeData && (resumeData.resumeInfos[0].headImg || 'https://xmjob.oss-cn-hangzhou.aliyuncs.com/life/20201022/20201022111406.png')+'?'+new Date().getTime()" class="face" crossOrigin="anonymous">
                        </div>
                        <div class="personal-content flex-item">
                            <div class="title">
                                <div class="name">{{resumeData && resumeData.resumeInfos[0].name}}</div>
                            </div>
                            <div class="other-info">
                                <span>{{resumeData && resumeData.resumeInfos[0].sex == 1 ? '男' : '女'}}</span>
                                <span>{{age}}岁</span>
                                <span>{{resumeData && resumeData.resumeInfos[0].highestEducationDesc}}</span>
                                <span>{{resumeData && resumeData.resumeInfos[0].workExperienceDesc}}</span>
                                <span>{{resumeData && resumeData.resumeInfos[0].maritalStatus == 1 ? '已婚' : '未婚'}}</span>
                            </div>
                            <div class="personal-concat">
                                <div class="phone"><img
                                    src="@/assets/me/red-phone.png"><span>{{resumeData && resumeData.resumeInfos[0].phone}}</span>
                                </div>
                                <div class="email"><img
                                    src="@/assets/me/red-email.png"><span>{{resumeData && resumeData.resumeInfos[0].email}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <!---->
                <div class="job-intention">
                    <div class="title">求职意向</div>
                    <div class="job-content" v-if="resumeData.resumeIntentions.length">
                        <div class="content-item">
                            期望职位：{{resumeData && resumeData.resumeIntentions[0].expectPosition}}
                        </div>
                        <div class="content-item">
                            期望行业：{{resumeData && resumeData.resumeIntentions[0].expectIndustry}}
                        </div>
                        <div class="content-item">
                            期望薪资：{{resumeData && resumeData.resumeIntentions[0].expectSalary}}
                        </div>
                        <div class="content-item">
                            求职状态：{{resumeData && resumeData.resumeIntentions[0].currentState == 1 ? "在职，但考虑换个环境" : "已离职"}}
                        </div>
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <!---->
                <div class="self-desc">
                    <div class="title">自我描述</div>
                    <div class="desc-content">
                        {{resumeData && resumeData.resumeSelfDescs.length && resumeData.resumeSelfDescs[0].selfDesc}}
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <!---->
                <div class="education">
                    <div class="title">教育经历</div>
                    <div class="education-content" v-if="resumeData.resumeEducations.length > 0">
                        <div class="education-item flex"
                            v-for="(items,index) in resumeData.resumeEducations" :key="index">
                            <div class="label">
                                {{parseTime(new Date(items.startTime), '{y}-{m}')}} 
                                至
                                {{parseTime(new Date(items.endTime), '{y}-{m}')}}
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val">{{items.education}} | {{items.schoolName}} | {{items.majorName}}</div>
                        </div>
                    </div>
                    <div class="education-content no-data" v-else>
                        没有
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <!---->
                <div class="work-experience">
                    <div class="title">工作经历</div>
                    <div class="work-content" v-if="resumeData.resumeWorks.length > 0">
                        <div class="work-item flex" v-for="(items,index) in resumeData && resumeData.resumeWorks"
                            :key="index">
                            <div class="label">
                                <div class="time">{{parseTime(new Date(items.startTime), '{y}-{m}')}} 至
                                    {{parseTime(new Date(items.endTime), '{y}-{m}')}}
                                </div>
                                <div class="month-total">
                                    {{formatTimeTotal(new Date(items.startTime), new Date(items.endTime))}}
                                </div>
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val flex-item">
                                <div class="item-title flex">
                                    <div class="flex-item">{{items.positionName}} | {{items.companyName}}</div>
                                </div>
                                <div class="item-text">{{items.workDesc}}</div>
                            </div>

                        </div>

                    </div>
                    <div class="work-content no-data" v-else>
                          没有
                    </div>

                </div>
                <!---->
                <div class="row-line"></div>
                <!---->
                <div class="work-experience">
                    <div class="title">培训经历</div>
                    <div class="work-content" v-if="resumeData.resumeTrains.length>0">
                        <div class="work-item flex" v-for="(items,index) in resumeData && resumeData.resumeTrains"
                            :key="index">
                            <div class="label">
                                <div class="time">{{parseTime(new Date(items.startTime), '{y}-{m}')}} 至
                                    {{parseTime(new Date(items.endTime), '{y}-{m}')}}
                                </div>
                                <div class="month-total">
                                    {{formatTimeTotal(new Date(items.startTime), new Date(items.endTime))}}
                                </div>
                            </div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val flex-item">
                                <div class="item-title flex">
                                    <div class="flex-item">{{items.trainName}} | {{items.trainClass}}</div>
                                </div>
                                <div class="item-text">{{items.trainContent}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="work-content no-data" v-else>
                        没有
                    </div>
                </div>
                <div class="row-line"></div>
                <!---->
                <div class="certificate">
                    <div class="title">获得证书</div>
                    <div class="certificate-content" v-if="resumeData.resumeCertificates.length>0">
                        <div class="certificate-item flex" v-for="(items,index) in resumeData.resumeCertificates" :key="index">
                            <div class="label">{{items.year}}-{{items.month}}</div>
                            <div class="line">
                                <div class="dian"></div>
                                <div class="line-box"></div>
                            </div>
                            <div class="item-val">{{items.certificateName}}</div>
                        </div>
                    </div>
                    <div class="certificate-content no-data" v-else>
                        没有
                    </div>
                </div>

                <div class="row-line"></div>
                <div class="language">
                    <div class="title">语言能力</div>
                    <div class="language-content" v-if="resumeData.resumeLanguages.length > 0">
                        <div class="language-item" v-for="(items,index) in resumeData && resumeData.resumeLanguages"
                            :key="index">
                            <div class="language-name">{{items.language}}</div>
                            <div class="language-level">{{items.proficiency | proficiency}}</div>
                        </div>
                    </div>
                    <div class="language-content no-data" v-else>
                        没有
                    </div>
                </div>

                <div class="row-line"></div>
                <div class="specialty">
                    <div class="title">特长标签</div>
                    <div class="specialty-content" v-if="selected.length>0">
                        <div class="specialty-item" v-for="(items,index) in selected" :key="index">
                            {{items}} 
                        </div>
                    </div>
                    <div class="specialty-content no-data" v-else>
                        没有
                    </div>
                </div>
                <!---->
                <div class="row-line"></div>
                <div class="opus">
                    <div class="title">照片/作品</div>
                    <div class="opus-content" v-if="resumeData.resumeProducts.length>0">
                        <div class="opus-line flex">
                            <div class="opus-item" v-for="(items,index) in resumeData.resumeProducts" :key="index">
                                <div class="opus-img">
                                    <img :src="items.fileId+'?'+new Date().getTime()" class="face" crossOrigin="anonymous">
                                </div>
                                <div class="opus-desc flex">
                                    <div class="opus-name flex-item" style="text-align: center;">{{items.remark}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="opus-content no-data" v-else>
                        没有
                    </div>
                </div>

                
            </div>
            <div class="resume-preview-left" v-show="!firstFlag" id="printTest">
                <img :src="dataURL" width="100%" alt="">
            </div>
            <div class="resume-preview-right">
                <div class="preview-option">
                    <!--<div class="qr-code">
                        <vue-qr class="qrcode-img" :text="codeValue" :margin="0" :size="190"
                                :logoSrc="logoSrc"></vue-qr>
                    </div>-->
                    <div class="edit-btn" @click="goToEdit()"><img src="@/assets/me/edit-white.png">修改简历
                    </div>
                    <div class="option-title">
                        <div class="line"></div>
                        <div class="title-text">操作</div>
                    </div>
                    <div class="print-btn" @click="toImg">生成打印文件</div>
                    <div class="print-btn" v-print="'#printTest'">打印简历</div>

                    <div class="print-btn" @click="$router.push('/account/myResume')">简历列表</div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import {getResume} from '@/api/me/resume'
import vueQr from 'vue-qr'
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import html2canvas from 'html2canvas'
export default {
    name: 'resume',
    data: function () {
        return {
            logoSrc: '',
            codeValue: location.href,
            id: this.$route.query.id,
            resumeData: null,
            age: 0,
            printConf:{
                id: 'printTest',
                popTitle: 'XXX的简历',
            },
            firstFlag: true,
            dataURL:'',
            selected:[],
        }
    },
    watch: {},
    components: {Header, Footer, vueQr, html2canvas},
    created() {
        this.getResumeInfo();
    },
    mounted(){
        this.toImg()
    },
    filters:{
        proficiency(val){
            switch(val){
                case "1":
                    return "一般";
                    break;
                case "2":
                    return "熟练";
                    break;
                case "3":
                    return "精通";
                    break;
                default:
                    return "未知错误";
                    break;
            }
        }
    },
    methods: {
        toImg() {
            html2canvas(this.$refs.bill,{
                useCORS:true,//允许加载跨域的图片
                logging: false, //日志开关，发布的时候记得改成false
            }).then(canvas => {
                let imgUrl = canvas.toDataURL('image/png');
                this.dataURL = imgUrl;
                this.firstFlag = false
            }).catch(error => {
                this.$message.error(err);
            })
        },
        getResumeInfo() {
            var data = {id: this.id};
            getResume(data).then(res => {
                this.resumeData = res.datas;
                let birthdays = res.datas.resumeInfos[0].year.substring(0,4);
                this.age = new Date().getFullYear() - birthdays

                let arr = res.datas.resumeSpecialtyTags[0].specialtyTags.split(",");
                for (let i = 0; i < arr.length; i++) {
                    let element = arr[i];
                    this.selected.push(element)
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        goToEdit() {
            let id = this.$route.query.id;
            this.$router.push({path: "/resume", query: {'id': id}});
        },
    }
}
</script>
<style lang="scss" scoped>
.header {
    >>>.top{
        background: #3B4D66;
    }
    >>>.nav {
        background:#435772;
    }
}
.resume-preview {
    width: 100%;

    .resume-preview-main {
        width: 1200px;
        padding: 35px 0;
        margin-left: auto;
        margin-right: auto;
        min-height: 700px;

        .resume-preview-left {
            width: 880px;
            background-color: #fff;
            padding: 30px 30px;
            box-sizing: border-box;

            .row-line {
                width: 100%;
                border-bottom: 1px dashed #E0E0E0;
            }

            /***** ***/
            .personal-info {
                width: 100%;
                position: relative;

                .personal-main {
                    padding-bottom: 30px;

                    .face-box {
                        width: 80px;
                        height: 102px;
                        position: relative;
                        cursor: pointer;

                        .face {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        .face-text {
                            text-align: center;
                            color: #fff;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 21px;
                            line-height: 21px;
                            font-size: 12px;
                            background-color: rgba(0, 0, 0, 0.3);
                        }
                    }

                    .personal-content {
                        margin-left: 23px;
                        color: #787878;

                        .title {
                            overflow: hidden;
                            height: 28px;
                            line-height: 28px;
                            color: #121212;
                            font-weight: 400;

                            .name {
                                font-size: 26px;
                                float: left;
                            }

                            .phone {
                                float: left;
                                margin-left: 25px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -3px;
                                }
                            }

                            .email {
                                float: left;
                                margin-left: 50px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -2px;
                                    margin-right: 3px;
                                }
                            }
                        }

                        .other-info {
                            color: #787878;
                            overflow: hidden;

                            span {
                                display: block;
                                float: left;
                                padding: 0 10px;
                                border-right: 1px solid #ccc;
                            }

                            span:last-child {
                                border-right: 0;
                            }

                            span:first-child {
                                padding-left: 0;
                            }

                            margin-top: 15px;
                        }

                        .personal-concat {
                            overflow: hidden;
                            height: 28px;
                            line-height: 28px;
                            color: #CE3A5C;
                            font-weight: 400;
                            margin-top: 15px;

                            .phone {
                                float: left;
                                margin-left: -3px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -3px;
                                }
                            }

                            .email {
                                float: left;
                                margin-left: 50px;

                                img {
                                    vertical-align: middle;
                                    margin-top: -2px;
                                    margin-right: 3px;
                                }
                            }
                        }
                    }
                }
            }

            /***** ***/
            .job-intention {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .job-content {
                    overflow: hidden;
                    margin-top: 20px;
                    color: #787878;

                    .content-item {
                        line-height: 30px;
                        padding-right: 10px;
                    }
                }
            }

            /***** ***/
            .self-desc {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .desc-content {
                    margin-top: 20px;
                    color: #787878;
                    line-height: 30px;
                }
            }

            /***** ***/
            .education {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .education-content {
                    margin-top: 20px;
                    color: #787878;

                    .education-item {
                        min-height: 30px;
                        line-height: 30px;

                        .label {
                            padding-right: 20px;
                            width: 156px;
                            text-align: right;
                        }

                        .line {
                            width: 7px;
                            position: relative;

                            .dian {
                                width: 7px;
                                height: 7px;
                                background: #D0D0D0;
                                border-radius: 50%;
                                position: absolute;
                                top: 11px;
                                left: 0;
                            }

                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-left: 20px;
                        }
                    }

                    .education-item:first-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 50%;
                                width: 1px;
                                margin-left: 3px;
                                position: absolute;
                                top: 50%;
                            }
                        }
                    }

                    .education-item:last-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 50%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }

            /***** ***/
            .work-experience {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .work-content {
                    margin-top: 20px;
                    color: #787878;

                    .work-item {
                        min-height: 30px;
                        line-height: 30px;

                        .label {
                            padding-right: 20px;
                            text-align: right;
                            width: 156px;

                            .month-total {
                                font-size: 12px;
                                color: #BCBCBC;
                            }
                        }

                        .line {
                            width: 7px;
                            position: relative;

                            .dian {
                                width: 7px;
                                height: 7px;
                                background: #D0D0D0;
                                border-radius: 50%;
                                position: absolute;
                                top: 11px;
                                left: 0;
                            }

                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-left: 20px;

                            .item-title {
                                color: #3EABC4;
                                font-weight: bold;
                            }

                            padding-bottom: 40px;
                        }
                    }

                    .work-item:first-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                                margin-top: 15px;
                            }
                        }
                    }

                    .work-item:last-child {
                        .line {
                            .line-box {
                                border-right: 1px solid #D0D0D0;
                                height: 100%;
                                width: 1px;
                                margin-left: 3px;
                            }
                        }

                        .item-val {
                            padding-bottom: 0px;
                        }
                    }
                }
            }

            /***** ***/
            .language {
                width: 100%;
                position: relative;
                margin: 30px 0;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #3EABC4;
                    border-left: 4px solid #3EABC4;
                    text-indent: 10px;
                }

                .language-content {
                    margin-top: 20px;
                    color: #787878;
                    line-height: 30px;
                    overflow: hidden;

                    .language-item {
                        min-width: 66px;
                        border: 1px solid #3EABC4;
                        float: left;
                        margin-right: 20px;
                        border-radius: 2px;

                        .language-name {
                            background-color: #3EABC4;
                            color: #fff;
                            text-align: center;
                            box-sizing: border-box;
                            padding: 0 10px;
                        }

                        .language-level {
                            text-align: center;
                            color: #3EABC4;
                        }
                    }
                }
            }

            /***** ***/
        }

        .resume-preview-right {
            width: 300px;
            margin-left: 20px;

            .preview-option {
                background-color: #fff;
                padding-top: 52px;
                padding-bottom: 200px;

                .qr-code {
                    width: 200px;
                    height: 200px;
                    margin-left: auto;
                    margin-right: auto;
                    border: 1px solid #ccc;

                    img {
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 5px;
                        display: block !important;
                    }
                }

                .edit-btn {
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    background: #3EACC4;
                    border-radius: 4px;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 30px;
                    color: #fff;
                    cursor: pointer;

                    img {
                        margin-right: 5px;
                        vertical-align: middle;
                        margin-top: -2px;
                    }
                }

                .option-title {
                    width: 140px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: auto;
                    margin-right: auto;
                    position: relative;
                    margin-top: 65px;

                    .line {
                        width: 100%;
                        height: 15px;
                        border-bottom: 1px solid #ccc;
                    }

                    .title-text {
                        padding: 0 5px;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        color: #9A9A9A;
                        margin-left: -19px;
                    }
                }

                .print-btn {
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 4px;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 10px;
                    color: #3EACC4;
                    border: 1px solid #3EACC4;
                    cursor: pointer;
                }
            }

        }
    }
}

    .certificate{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.certificate-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.certificate-content{
			margin-top: 25px;
			color: #787878;
			
			.certificate-item{
				min-height: 30px;
				line-height: 30px;
				.all-option{
					margin-left: 20px;
					opacity: 0;
					pointer-events: none;
					span{
						color: #3EABC4;
						margin-left: 10px;
						cursor: pointer;
					}
				}
				.label{
					padding-right: 20px;
					width: 156px;
					text-align: right;
				}
				.line{
					width: 7px;
					position: relative;
					.dian{
						width: 7px;
						height: 7px;
						background: #D0D0D0;
						border-radius: 50%;
						position: absolute;
						top: 11px;
						left: 0;
					}
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 100%;
						width: 1px;
						margin-left: 3px;
					}
				}
				.item-val{
					padding-left: 20px;
				}
			}
			.certificate-item:hover{
				.all-option{
					opacity: 1;
					pointer-events:painted;
				}
			}
			.certificate-item:first-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 50%;
						width: 1px;
						margin-left: 3px;
						position: absolute;
						top: 50%;
					}
				}
			}
			.certificate-item:last-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 50%;
						width: 1px;
						margin-left: 3px;
					}
				}
			}
		}
		.certificate-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					
				}
				.edit-right{
					padding-right: 40px;
					
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						.el-input{
							width: 100%;
						}
						
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					.tips{
						font-weight: 400;
						color: #BBBBBB;
						line-height: 36px;
						margin-left: 20px;
					}
					
				}
			}
		}
    }
    .specialty{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.specialty-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.specialty-content{
			margin-top: 25px;
			color: #787878;
			line-height: 30px;
			overflow: hidden;
			padding-left: 10px;
			.specialty-item{
				padding: 0 20px;
				float: left;
				margin-right: 20px;
				margin-bottom: 20px;
				border: 1px solid #DEDEDE;
				border-radius: 2px;
			}
		}
		.specialty-edit{
			.content{
				margin-top: 25px;
				color: #787878;
				line-height: 30px;
				overflow: hidden;
				padding-left: 10px;
				.specialty-item{
					padding: 0 20px;
					float: left;
					margin-right: 20px;
					margin-bottom: 20px;
					border: 1px solid #DEDEDE;
					border-radius: 2px;
					cursor: pointer;
				}
				.specialty-item.is-active{
					border:1px solid #3EABC4;
					color: #3EABC4;
				}
			}
			.el-form-box{
				width: 390px;
				margin-top: 20px;
				.el-input__inner{
					border-radius: 0px;
				}
				.el-input{
					width: 100%;
				}
				.add-specialty{
					width: 60px;
					height: 36px;
					line-height: 36px;
					cursor: pointer;
					background: #3DABC4;
					color: #fff;
					text-align: center;
				}
			}
			.form-option{
				margin-top: 10px;
				padding-left: 10px;
				.save{
					margin-right: 15px;
				}
				.tips{
					font-weight: 400;
					color: #BBBBBB;
					line-height: 36px;
					margin-left: 20px;
				}
				
			}
		}
	}
.opus{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.opus-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.opus-content{
			margin-top: 25px;
			color: #787878;
			overflow: hidden;
			.opus-line{
				flex-wrap:wrap;
			}
			.opus-item{
				border-radius: 2px;
				width: 260px;
				margin-bottom: 15px;
				margin-right: 40px;
				.opus-img{
					width: 260px;
					height: 210px;
					img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.opus-desc{
					margin-top: 15px;
					.opus-name{
						padding-right: 10px;
					}
					.opus-option{
						span{
							cursor: pointer;
							display: block;
						}
						.edit{
							color: #3EABC4;
							margin-right: 10px;
						}
					}
				}
			}
			.opus-item:nth-child(3n){
				margin-right: 0;
			}
		}
		.opus-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					width: 675px;
					box-sizing: border-box;
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.el-input{
							width: 100%;
						}
						.upload-input{
							width: 100%;
							.el-upload{
								width: 100%;
							}
						}
						.upload-btn{
							width: 100%;
							height: 60px;
							line-height: 60px;
							background: #EEF5F7;
							border-radius: 4px;
							text-align: center;
							color: #3EABC4;
							img{
								vertical-align: middle;
								margin-top: -3px;
								margin-right: 5px;
							}
						}
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.edit-item.upload-item{
					.el-form-item__label{
						font-weight: normal;
						color: #777777;
						height: 60px;
						line-height: 60px;
					}
					.red-dian{
						margin-top: 28px;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					.tips{
						font-weight: 400;
						color: #BBBBBB;
						line-height: 36px;
						margin-left: 20px;
					}
					
				}
			}
		}
    }
</style>
